<template>
  <div class="m-container">
    <el-space direction="vertical">
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        <el-button type="primary" icon="el-icon-refresh-right">刷新</el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
      </el-button-group>
    </el-space>
    <el-row>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="title" label="标题"></el-table-column>
        <el-table-column prop="authorName" label="作者" width="120"></el-table-column>
        <el-table-column prop="updateTime" label="时间" width="240"></el-table-column>      
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    
    <!-- 对话框 -->
    <el-dialog
      title="编辑文章"
      v-model="dialogVisible"
      width="80%"
      :before-close="handleClose" ref="dialog"
      @open="openDialog">
      
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
          <QuillEditor ref="myQuillEditor" theme="snow" v-model:content="ruleForm.content" content="ruleForm.content" contentType="html" 
              toolbar="full" style="min-height:300px;" @ready="editerReady" />
        <el-form-item>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" icon="el-icon-document-checked" @click="save">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { listArticles, saveArticle, getArticleContent } from '@/api/article'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
export default {
  components: {
    QuillEditor
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        id: '',
        title: '',
        content: '',
        text: ''
      },
      rules: {
        title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  created() {
    this.getArticles()
  },
  methods: {
    update() {
      this.ruleForm.text = this.$refs.myQuillEditor.getText()
    },
    // 添加文章
    add() {
      this.openDialog(true)
    },
    // 保存文章
    save() {
      this.$refs['ruleForm'].validate((valide) => {
        if(valide) {
          if(_.trim(this.$refs.myQuillEditor.getText()).length == 0) {
            ElMessage.error('内容不能为空')
            return
          }
          saveArticle(this.ruleForm)
          .then(res => {
            if(res.data === true) {
              this.handleClose()
              this.getArticles()
            }
            else {
              ElMessage.error(res.message)
            }
          })
        }
      })
    },
    // 获取文章列表
    getArticles() {
      listArticles().then(res => {
        this.tableData = res.data
      })
    },
    // 打卡对话框
    openDialog(isNew) {
      this.dialogVisible = true
      if(isNew === true) {
        this.ruleForm = {
          id: '',
          title: '',
          content: '',
          text: ''
        }
      }
      if(this.$refs.myQuillEditor){
        this.$refs.myQuillEditor.setHTML(this.ruleForm.content)
      }
    },
    // 编辑事件
    handleClick(row) {
      let vm = this
      this.ruleForm.id = row.id
      this.ruleForm.title = row.title
      getArticleContent(row.htmlUrl)
        .then(res => {
          vm.ruleForm.content = res
          this.openDialog(false)
        })
    },
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false
    },
    editerReady() {
      this.$nextTick(()=>{
        this.$refs.myQuillEditor.setHTML(this.ruleForm.content)
      })
    }
  },
  computed: {
  }
}
</script>
<style scoped>
 .m-container {
   padding: 20px;
 }
</style>